---
title: "容器"
description: "根据当前断点固定元素宽度的组件"
---

import { defaultConfig } from '@/utils/defaultConfig'
export const screens = defaultConfig.theme.screens

export const classes = (
  <table className="w-full text-left border-collapse">
    <colgroup>
      <col className="w-1/4" />
      <col className="w-1/4" />
      <col className="w-1/2" />
    </colgroup>
    <thead>
      <tr>
        <th className="z-20 sticky top-0 text-sm font-semibold text-gray-600 bg-white p-0">
          <div className="pb-2 border-b border-gray-200">Class</div>
        </th>
        <th className="z-20 sticky top-0 text-sm font-semibold text-gray-600 bg-white p-0">
          <div className="pb-2 border-b border-gray-200">Breakpoint</div>
        </th>
        <th className="z-20 sticky top-0 text-sm font-semibold text-gray-600 bg-white p-0">
          <div className="pb-2 border-b border-gray-200">Properties</div>
        </th>
      </tr>
    </thead>
    <tbody className="align-baseline">
      <tr>
        <td rowSpan={6} className="py-2 font-mono text-xs text-violet-600 whitespace-nowrap">
          container
        </td>
        <td className="py-2 text-xs italic">
          None
        </td>
        <td className="py-2 font-mono text-xs text-light-blue-600 whitespace-pre">
          width: 100%;
        </td>
      </tr>
      {Object.keys(screens).map((screen) => (
        <tr key={screen}>
          <td className="py-2 border-t border-gray-200 font-mono text-xs">
            {screen} <span className="font-sans italic">({screens[screen]})</span>
          </td>
          <td className="py-2 font-mono text-xs text-light-blue-600 whitespace-pre border-t border-gray-200">
            max-width: {screens[screen]};
          </td>
        </tr>
      ))}
    </tbody>
  </table>
)

<!-- ## Usage -->
## 使用方法

<!-- The `container` class sets the `max-width` of an element to match the `min-width` of the current breakpoint. This is useful if you'd prefer to design for a fixed set of screen sizes instead of trying to accommodate a fully fluid viewport. -->
`container` 类设置一个元素的 `max-width` 来匹配当前断点的 `min-width`。如果您想为一组固定的屏幕尺寸设计，而不是试图适应一个完全流动的视窗，这很有用。

<!-- Note that unlike containers you might have used in other frameworks, **Tailwind's container does not center itself automatically and does not have any built-in horizontal padding.** -->
请注意，与您在其他框架中可能使用的容器不同，** Tailwind 的容器不会自动居中，也没有任何内置的水平方向的内边距。

<!-- To center a container, use the `mx-auto` utility: -->
要使一个容器居中，使用 `mx-auto` 功能类：

```html
<div class="container **mx-auto**">
  <!-- ... -->
</div>
```

<!-- To add horizontal padding, use the `px-{size}` utilities: -->
要添加水平内边距，请使用 `px-{size}` 功能类。

```html
<div class="container mx-auto **px-4**">
  <!-- ... -->
</div>
```

<!-- If you'd like to center your containers by default or include default horizontal padding, see the [customization options](#customizing) below. -->
如果您想让您的容器默认居中或包含默认的水平内边距，请看下面的 [自定义选项](#customizing)。

<!-- ## Responsive variants -->
## 响应式变体

<!-- The `container` class also includes responsive variants like `md:container` by default that allow you to make something behave like a container at only a certain breakpoint and up: -->
`container` 类还包括响应的变体，比如默认的 `md:container`，它允许您让某些东西只在某个断点及以上表现得像一个容器。

```html
<!-- Full-width fluid until the `lg` breakpoint, then lock to container -->
<div class="**md:container md:mx-auto**">
  <!-- ... -->
</div>
```

<!-- ## Customizing -->
## 定制

<!-- ### Centering by default -->
### 默认居中

<!-- To center containers by default, set the `center` option to `true` in the `theme.container` section of your config file: -->
为了使容器在默认情况下居中，在配置文件的 `theme.container` 部分将 `center` 选项设置为 `true` 。

```js
// tailwind.config.js
module.exports = {
  theme: {
    container: {
      center: true,
    },
  },
}
```

<!-- ### Horizontal padding -->
### 水平内边距

<!-- To add horizontal padding by default, specify the amount of padding you'd like using the `padding` option in the `theme.container` section of your config file: -->
要默认添加水平内边距，请在配置文件的 `theme.container` 部分使用 `padding` 选项指定您想要的内边距大小。

```js
// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: '2rem',
    },
  },
}
```

<!-- If you want to specify a different padding amount for each breakpoint, use an object to provide a `default` value and any breakpoint-specific overrides: -->
如果您想为每个断点指定不同的内边距大小，可以使用一个对象来提供 `default` 值和任何根据断点指定的覆盖。

```js
// tailwind.config.js
module.exports = {
  theme: {
    container: {
      padding: {
        DEFAULT: '1rem',
        sm: '2rem',
        lg: '4rem',
        xl: '5rem',
        '2xl': '6rem',
      },
    },
  },
};
```

<!-- ### Disabling responsive variants -->
### 禁用响应式变体

<!-- If you'd like to disable the responsive variants, you can do so using by setting `container` to an empty array in the `variants` section of your `tailwind.config.js` file: -->
如果您想禁用响应式变体，您可以在您的 `tailwind.config.js` 文件的 `variants` 部分将 `container` 设置为一个空数组。

```diff-js
  // tailwind.config.js
  module.exports = {
    variants: {
      // ...
+     container: [],
    }
  }
```

<!-- ### Disabling entirely -->
### 完全禁用

<!-- If you don't plan to use the `container` class in your project, you can disable it entirely by setting the `container` property to `false` in the `corePlugins` section of your config file: -->
如果您不打算在您的项目中使用 `container` 类，您可以通过在配置文件的 `corePlugins` 部分将 `container` 属性设置为 `false` 来完全禁用它。

```diff-js
  // tailwind.config.js
  module.exports = {
    corePlugins: {
      // ...
+     container: false,
    }
  }
```
